<template>
	<gui-page :customHeader="true">

		<template v-slot:gBody>
			
			<!-- 主页头部 -->
			<Head :headBack="head_back" :showPopup="showPopup"></Head>

			<!-- 悬浮窗 -->
			<hover-ball :onClickHover="dragClick" :iconUrl="iconUrl" />
			
			<!-- 主页内容 -->
			<view class="app">
				<!-- 背景图 -->
				<!-- <view class="bg" :style="'background-image: url('+uimg+bg_img+')'"></view> -->

				<!-- 内容 -->
				<view class="list-view">
					<!-- 头部宫格 -->
					<!-- <img class="toubu" src="../../static/home/touBj.jpeg" alt=""> -->
					<homeHead :data="top_menu"></homeHead>
					<!-- 轮播图 -->

					<!-- 背景 -->
					<view @click="gaibian" style="position: absolute; background-color: aliceblue;
						 width: 60rpx; height: 60rpx; border-radius: 50rpx; 
						 padding: 15rpx; font-weight: bold; z-index: 5; 
						 text-align: center; right: 0; font-size: 20rpx;">
						改变背景</view>
					<img class="beijing" id="bj1" src="@/static/home/bj1.jpeg" alt="">
					<img class="beijing" id="bj2" src="@/static/home/bj2.jpeg" alt="">

					<view class="swiper-view">
						<gui-swiper :swiperItems="swiperItems" :width="680" :height="300" :borderRadius="15"
							@taped="swiper_click" :spacing="0" :padding="0" :opacity="0.66" borderRadius="10rpx">
						</gui-swiper>
					</view>
					<!-- 中间宫格 -->
				      <navMenu :data="nav_menu"></navMenu>
					<!-- 公告栏 -->
					<view class="gui-margin-x  gui-border-radius gui-border bg_opacity2"
						style="height: 60rpx;display: flex;align-items: center;">
						<view class="right-view-item" style=" width: 15%;">
							<text class=" gui-block gui-icons demo-icon gui-primary-color"
								style="margin: 0 0 0 10rpx;font-size: 30rpx;">&#xe62b;</text>
						</view>
						<view style="width: 70%;" class="left_rigth">
							<gui-speaker :vertical="true" :items="speakerMsgs">
							</gui-speaker>
						</view>
						<view style=" width: 15%;" class="item-flex-content">
							<text class="gui-text-small gui-color-blue" @click="noticeList">更多</text>
						</view>
					</view>
					<!-- 跳转item capsule_menu -->
				<capsuleMenu :data="capsule_menu"></capsuleMenu>
					<!-- 活动中心 -->
					<view class="gui-flex gui-space-between gui-padding-x">
						<text class="gui-color-blue gui-bold" style="font-size: 30rpx;">活动中心</text>
						<text class="gui-text-small" @click="gotoActive">查看更多</text>
					</view>
					<activityMenu :data="activity_menu"></activityMenu>
			
					<!-- 快捷功能 -->
					<view class="gui-flex gui-space-between gui-padding-x ">
						<text class="gui-color-blue gui-bold" style="font-size: 30rpx;">快捷功能</text>
						<text class="gui-text-small" @click="gotoServe">查看更多</text>
					</view>
					<view class="gui-padding-x">
						<view class="gui-border-radius newslist gui-flex flex-center"
							style="height: 160rpx;background: linear-gradient(rgb(201,215,254), rgb(248,250,253));">
							<view style="display: flex;justify-content: space-around;">
								<view style="" class="gui-border gui-flex flex-center gui-border-radius commonLink"
									@click="navTo(1)">
									<view style="margin:0 20rpx">
										<text class="gui-bold">常用链接</text>
										<text class="gui-block gui-color-gray" style="font-size: 20rpx;">使用方便快捷</text>
									</view>
									<image src="https://app.lgwisdomunion/static/img/link.c4a19ee0.png"
										style="height: 80rpx;width: 80rpx;"></image>
								</view>
								<view style="" class="gui-border gui-flex flex-center gui-border-radius bookhouse"
									@click="navTo(2)">
									<image src="@/static/img/bookhouse.png" style="width: 240rpx;height: 80rpx;">
									</image>
								</view>
							</view>
						</view>
					</view>
					<!-- 新闻资讯 -->
					<view class="gui-flex gui-space-between gui-padding-x gui-margin-top ">
						<text class="gui-color-blue gui-bold" style="font-size: 30rpx;">新闻资讯</text>
						<!-- <text class="gui-text-small" @click="News">查看更多</text> -->
					</view>
					<!-- <view class="gui-padding-x">
						<view v-for="(item,index) in artciles" :key="index" @click="newsDetail(item)"
							class="bg_opacity gui-border gui-border-radius newslist">
							<view class="title">
								{{item.title}}
							</view>
							<view class="gui-color-gray gui-text-small gui-flex ">
								<text class="">
									{{item.lookNum}}次浏览
								</text>
								<text style="padding-left: 50rpx;">
									{{item.compName}}
								</text>
							</view> 
						</view>
					</view> -->
					<gui-page ref="guiPage" :fullPage="true">
						<template v-slot:gBody>
							<view class="gui-flex1 gui-flex gui-column">
								<view style="padding:20rpx 30rpx; ">
									<gui-switch-navigation :items="tabs" textAlign="center" :size="0" :margin="60"
										:currentIndex="currentIndex" activeDirection="center" @change="navchange">
									</gui-switch-navigation>
								</view>
								<view class="gui-bg-gray">
									<view class="gui-bg-white">
										<view style="padding-top: 30rpx;"
											class="gui-flex gui-row gui-space-between gui-nowrap gui-border-b gui-margin-x"
											v-for="(item, idx) in news" :key="idx" @click="gotoDetail(item)">
											<view class="news-title">
												<gui-skeleton customStyle="border-radius:8rpx; height:80rpx;">
													<text class="gui-text gui-primary-text">{{item.title}}</text>
												</gui-skeleton>
												<view class="gui-flex gui-space-between gui-color-gray"
													style="font-size: 20rpx;margin: 40rpx 0;">
													<text class="gui-block gui-margin-x">{{item.compName}}</text>
													<text class="gui-block gui-margin-x">{{item.lookNum}}次浏览</text>
												</view>
											</view>
											<view class="news-img" style="margin: 20rpx 0;">
												<gui-skeleton customStyle="width:200rpx; height:100rpx;">
													<gui-image borderRadius="8rpx" :src="uimg+item.fid" :width="200">
													</gui-image>
												</gui-skeleton>
											</view>

										</view>
									</view>
								</view>
								</swiper>
							</view>
						</template>
					</gui-page>
				</view>
			</view>
			<popup :show.sync="showPopup" :name="user.realName" :badge="user.orgName" :avatar="avatar"></popup>
			<!-- end主页内容 -->
		</template>
	</gui-page>
</template>
<script>
	var self;
	import artciles from '@/Grace6/demoData/article.js';
	import graceJS from "@/Grace6/js/grace.js"
	import popup from '@/components/popup-vip/popup-vip.vue';
	// 悬浮窗
	import hoverBall from '@/components/hover-ball/hover-ball.vue';
	import homeHead from '@/components/index/homeHead.vue'
	import navMenu from '@/components/index/navMenu.vue'
	import capsuleMenu from '@/components/index/capsuleMenu.vue'
	import activityMenu from '@/components/index/activityMenu.vue'
	import Head from '@/components/index/Head.vue'
	export default {
		data() {
			return {
				uimg: 'https://app.lgwisdomunion/API-RESOURCE/webView?fid=',
				bg_img: '',
				top_menu: [],
				swiperItems: [],
				swiperData: [],
				nav_menu: [],
				speakerMsgs: [],
				artciles: [],
				pageLoading: false,
				appMenu: null,
				capsule_menu: [],
				activity_source_menu: [],
				activity_menu: [],
				swiper_menu: [],
				show_head: false,
				head_back: "",
				interval: 3000,
				duration: 1000,
				// 新闻资讯
				navNum: 0,
				page: 0,
				pageSize: 10,
				cid: 0,
				// 新闻列表数据
				news: [],
				// 选项卡标签
				tabs: [],
				// 选中选项的 索引
				currentIndex: 0,
				cid: 0,
				firstTabId: 0,
				total: 0,
				showPopup: false,
				// name: '张三',
				// badge: '集团会员',
				avatar: 'https://jf.boyaltd.cn/static/bg.jpeg',
				user: [],
				// 悬浮窗图片
				iconUrl: '../../static/home/rengwu.png'
			}
		},
		components: {
			popup,
			homeHead,
			navMenu,
			capsuleMenu,
			activityMenu,
			Head
		},
		onLoad() {
			self = this;
			uni.showLoading({
				title: "加载中"
			});
			
			this.app_menu();
			
			this.getUserInfo()
			
			
			this.user = uni.getStorageSync('userInfo')
			console.log(this.user)
		},
		onPageScroll(e) {
			if (e.scrollTop > 1) {
				this.head_back = "background-color:white";
			} else {
				this.head_back = "";
			}
		},
		methods: {
			getUserInfo()
			{
				let self=this;
				this.$lg.Get("APP/sysUser/getUserInfo",{},function(res){
					console.log("getUserInfo",res)
					self.user=res.data;
					self.Lg_init();
				},function(err){
					console.log("getUserInfo->fail",err);
					self.$lg.reload_login(function(){
						self.Lg_init();
					});
				});
			},
			Lg_init()
			{
				this.indexLayout_view();
				
				// this.indexLayout();
				
				this.swiper();
				this.noticeInfo();
				this.newsInfo();
				
				// 新闻资讯
				this.getNav()
			},
			showPopup1() {
				this.showPopup = true
				console.log('--12-1-')
			},
			News() {
				uni.navigateTo({
					url: "/pages/news/news"
				})
			},
			search(){
				
			},
			scroll(e) {},
			swiper_click(index) {
				console.log(index);
				console.log(this.swiperData[index]);
				let data = this.swiperData[index]
				console.log("data", data.link)
				if (data.linkAddress == '' && data.link == '') {
					console.log("我是两者都为空")
				} else {
					if (data.linkAddress) {
						console.log("我是 data.linkAddress 不为空", data.linkAddress)
						location.href = data.linkAddress
					}
					if (data.link) {
						uni.navigateTo({
							url: "/pages/news/newsDetail?id=" + data.link
						})
					}
				}
			},
			app_menu() {
				let self = this;
				this.$boya.NPost("/app/get_menu", {
					category: ['首页项部', '首页导航', '首页魔方', '首页金刚', '福利尊享', '活动中心']
				}, (res) => {

					uni.hideLoading();
					let menu = {}
					for (let key in res.data) {
						let m = res.data[key];
						menu[m.name] = res.data[key].app_menu;
					}
					self.appMenu = menu;
					uni.setStorageSync("appMenu", menu);
					self.top_menu = menu['首页项部'];
					self.nav_menu = menu['首页导航'];
					self.capsule_menu = menu['首页金刚'];
					self.activity_source_menu = menu['活动中心']
					self.activity_group()


					self.$forceUpdate();
				});
			},

			getSwiper(d) {
				console.log("getSwiper", d)
			},
			notice() {
				console.log("我被点击了.....")
			},

			get_links(page = null, pageSize = null) {
				//常用连接
				let data = {
					page: page,
					pageSize: pageSize
				}
				this.$lg.Request({
					url: "APP/link/list",
					data: data,
					method: "GET"
				}, function(res) {

				});

			},
			indexLayout() {
				//首页布局
				this.$lg.Post("/APP/indexLayout/query", {}, function(res) {

				})
			},
			indexLayout_view() {
				//首页布局
				let self = this;
				uni.getStorage({
					key: "bgimg",
					success: function(res) {
						self.bg_img = res.data;
					}
				})
				this.$lg.Post("/APP/indexLayout/view", {
					"id": "0083befd-dd1e-4512-ad58-957abc2a7bc11"
				}, function(res) {

					self.bg_img = res.data.headPic;
					uni.setStorageSync("bgimg", self.bg_img);

				})
			},
			kingKongArea() {
				//快捷导航菜单

				this.$lg.Post("/APP/kingKongArea/queryPage", {}, function(res) {
					self.nav_menu = res.data.rows;
					for (let key in self.nav_menu) {
						if (self.nav_menu[key].links == "") {
							self.nav_menu[key].links = "https://app.lgwisdomunion/#" + self.nav_menu[key].path;
						}
					}
				})
			},
			noticeInfo() {
				//通知公告
				let data = {
					page: 1,
					pageSize: 5
				}
				this.$lg.Post("/APP/noticeInfo/queryPage", data, function(res) {
					self.speakerMsgs = res.data.rows;
					for (let key in self.speakerMsgs) {
						self.speakerMsgs[key].opentype = "navigate";
						self.speakerMsgs[key].url = "/pages/home/notice/notice?id=" + self.speakerMsgs[key].id;
					}
					console.log("speakerMsgs", self.speakerMsgs);

				})
			},
			//公告 - 更多
			noticeList() {
				uni.navigateTo({
					url: "/pages/home/notice/notice_index/notice_index"
				})
			},
			newsInfo() {
				//新闻资讯
				let data = {
					page: 1,
					pageSize: 10,
					type: 1
				}
				this.$lg.Post("/APP/newsInfo/queryPage", data, function(res) {
					self.artciles = res.data.rows;
				})
			},
			swiper() {
				//轮播图
				let self = this;
				self.swiperItems = [];
				this.$lg.Get("/APP/loop/query", {}, function(res) {
					self.swiperData = res.data;
					for (let key in res.data) {
						let item = res.data[key];
						let uimg = JSON.parse(item.indexUrlApp);
						self.swiperItems.push({
							img: self.uimg + uimg.id,
							title: item.title,
							url: item.url,
							opentype: 'click'
						})

					}
					console.log("swiperItems", self.swiperItems);
				})

			},

			nav_to(d, title = null) {
				if (title === "消息") {
					this.$comm.nav_to("#/pages/home/message/message", title);
				} else {
					this.$comm.nav_to(d, title);
				}
				// if(title === "消息"){
				// 	this.$comm.nav_to("#/pages/home/message/message", title);
				// }else{
				// 	if(title == "青年之家"){
				// 		this.$comm.nav_to("#/pages/home/youngHome/youngHome", title);
				// 	}else {
				// 		this.$comm.nav_to(d, title);
				// 	}
				// }
			},
			navTo(i) {

				if (i == 1) {
					uni.navigateTo({
						url: "/pages/indexNav/commonLink"
					})
				}
				if (i == 2) {
					this.$comm.nav_to(
						"https://open.dzzgsw.com/weixin/index.html?appID=lzgt&appKey=12fds4d6sg9pr66c9s57vva2c30l9ded&userName=19820722&userId=a642782a-d449-4454-959f-fd61b6ea0502&time=1679618447&sign=b18644a3faea0f610c5c9c1d03098b4f"
					);
				}
			},

			newsDetail(e) {
				uni.navigateTo({
					url: "/pages/news/newsDetail?id=" + e.id
				})
			},
			//活动中心跳转
			to_url(items) {
				if (items == null) {
					this.$boya.msg('暂未开放')
				}
				console.log(items)
			},
			activity_group() {
				const items = [...this.activity_source_menu]; // 复制原始数组
				const len = items.length;
				const remainder = len % 5; // 剩余元素数
				// 插入null填充使items的长度能够被5整除
				if (remainder > 0) {
					for (let i = 0; i < 5 - remainder; i++) {
						items.push(null);
					}
				}
				const groups = [];
				let i = 0;

				while (i < len) {
					let items2 = []
					const group = items[i]; // 每组第一个单独为一组
					items2.push(group);
					i++;

					let items3 = []
					for (let j = 0; j < 4; j++) { // 剩余四个元素分为一组
						items3.push(items[i]);
						i++;
					}
					items2.push(items3)
					groups.push(items2);
				}
				console.log(groups, '-1-2--2-')
				this.activity_menu = groups

			},
			gotoActive() {
				uni.switchTab({
					url: "/pages/switchPages/activity"
				})
			},
			gotoServe() {
				uni.switchTab({
					url: "/pages/switchPages/serve"
				})
			},

			// 新闻资讯
			getNav() {
				let self = this;
				this.$lg.Post("/APP/newsCategory/query", {}, (res) => {
					// console.log(res)
					self.tabs = res.data
					self.cid = res.data[0].id
					self.getnewsIngo()
				})
			},
			navchange: function(index) {
				let self = this;
				this.page = 1
				this.currentIndex = index;
				console.log(this.currentIndex)
				self.cid = self.tabs[index].id
				self.news = []
				this.getnewsIngo()
			},
			getnewsIngo() {
				let self = this;
				let data = {
					page: self.page,
					pageSize: self.pageSize,
					categoryId: self.cid
				}
				this.$lg.Post("/APP/newsInfo/queryPage", data, (res) => {
					// console.log(res.data.rows)
					self.total = res.data.total
					self.news = [...self.news, ...res.data.rows]
				})
			},
			gotoDetail(d) {
				uni.navigateTo({
					url: "/pages/news/newsDetail?id=" + d.id
				})
			},
			onReachBottom() {
				let self = this
				if (self.page * self.pageSize >= self.total) {
					uni.showToast({
						title: "没有更多数据了",
						icon: "none",
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (self.page <= self.page - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: ""
						});
						self.page++
						this.getnewsIngo()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},
			// 悬浮窗点击事件
			dragClick() {
				uni.showToast({
					title: '点击了“每日任务”',
					icon: 'none'
				});
			},
			// 改背景
			gaibian() {
				let bj1 = document.getElementById('bj1')
				let bj2 = document.getElementById('bj2')
				if (bj1.style.display == 'block') {
					bj1.style.display = 'none'
					bj2.style.display = 'block'
				} else {
					bj2.style.display = 'none'
					bj1.style.display = 'block'
				}
			}
		}

	}
</script>
<style lang="scss" scoped>
	//水平居中
	.item-flex-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.list-view {
		z-index: 2;
		position: relative;
		padding-bottom: 15%;
		padding-top: 150rpx;
		background: no-repeat center top / 100% 418rpx;
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)), url('@/static/home/touBj.jpeg')
	}

	.swiper-view {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 40rpx;
		padding-bottom: 10rpx;
	}

	.right-view-item {
		position: relative;
	}

	.right-view-item::after {
		content: '';
		/* 添加内容哨兵 */
		display: block;
		/* 将其转换为块级元素 */
		position: absolute;
		/* 绝对定位 */
		top: 0;
		right: 0;
		bottom: 0;
		border-right: 2px solid #ccc;
		/* 右侧边框 */
	}

	.app {
		position: relative;
		height: 100vh;
		/* overflow-y: scroll; */
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 1;
	}

	.head {
		height: calc(var(--status-bar-height)+70rpx);
		z-index: 99999;

		width: 100%;
		position: fixed;
		top: var(--window-top);
		padding-top: var(--status-bar-height);
		padding-left: 20rpx;
		padding-right: 140rpx;
		padding-bottom: 10rpx;
		align-items: center;
	}

	/* .body {
		padding-top: var(--status-bar-height);
	} */
	.gui-padding {
		padding: 20rpx 20rpx 15rpx 20rpx;
	}

	.gui-padding1 {
		padding: 20rpx 15rpx 15rpx 15rpx;
	}

	.left_rigth {
		padding: 0 20rpx 0 20rpx;
	}

	.bg_opacity {
		opacity: 0.8;
		background-color: white;

	}

	.bg_opacity2 {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.gui-grid {

		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.gui-grid-item {
		border-radius: 10rpx;
		padding: 4rpx;
		border: solid 1rpx #efefef;
		box-shadow: 2px 2px 5px #ccc;
		width: 22%;
		flex-direction: column !important;
		align-items: center !important;
		margin: 1rpx 5rpx 6rpx 0rpx;
		display: flex;
	}

	.newslist {
		margin-top: 20rpx;
		background-color: white;
		box-shadow: 2px 2px 5px #ccc;
		padding: 10rpx;
		// text-align: ;
	}

	.title {
		line-height: 50rpx;

		font-size: 30rpx;
	}

	.flex-center {
		justify-content: center;
		align-items: center;
	}

	.commonLink {
		height: 150rpx;
		width: 300rpx;
		background-color: rgb(221, 229, 249);
		margin: 0 10rpx;
	}

	.bookhouse {
		height: 150rpx;
		width: 300rpx;
		background-color: rgb(199, 229, 228);
		margin: 0 10rpx;
	}

	// 活动中心
	.activity-flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activity-view {
		margin: 10rpx 0 25rpx 20rpx;
		width: 45%;
		height: 93%;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.activity-grid-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 15rpx;
		width: 65%;
		height: 93%;
		margin: 10rpx 25rpx 25rpx 15rpx
	}
	.activity-grid-item {
		// border: 1px solid #ccc;
		width: 100%;
		height: 100%;

		image {
			border-radius: 5px;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.activity-card {
		display: flex;
		width: 99%;
		height: 99%;
		border-radius: 5px;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.2);
		background: linear-gradient(rgb(201, 215, 254), rgb(248, 250, 253));
	}

	.activity-swiper {
		height: 400rpx;
	}

	//end活动中心

	.sousuolan {
		width: 340rpx;
		padding-top: 10rpx;
		padding-bottom: 0;
		opacity: 0.8;
	}

	.toubu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 418rpx;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: -1;
	}

	.beijing {
		display: block;
		position: absolute;
		top: 416rpx;
		left: 0;
		width: 100%;
		height: 2400rpx;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: -1;
	}

	// 新闻资讯
	.demo-nav {
		padding: 15rpx 30rpx;
	}

	.demo-text {
		line-height: 200rpx;
		padding-bottom: 3000px;
	}

	.news-list {
		margin-top: 25rpx;
	}

	.news-img {
		width: 200rpx;
		margin-right: 30rpx;
		overflow: hidden;
	}

	.news-title {
		width: 200rpx;
		flex: 1;
	}
</style>
